<template>
	<el-dialog v-model="show" title="弹窗" width="800px" :close-on-click-modal="false" @open="open" @close="cancel">
		<div class="content">
			<AMap @get-adress="getAdress"></AMap>
		</div>
		<template #footer>
			<el-button @click="cancel">取 消</el-button>
			<el-button type="primary" @click="submit">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AMap from './Amap.vue'

// 获取父组件传值并赋默认值
const props = withDefaults(
	defineProps<{
		visible?: boolean // 是否展开
		id?: string // id
	}>(),
	{
		visible: false,
		id: ''
	}
)

// emit事件 ， 父组件中，子组件上用@
const emit = defineEmits(['update:visible', 'submit', 'cancel', 'getAdress'])

// 弹窗是否显示
const show = computed({
	get: () => {
		return props.visible
	},
	set: val => {
		emit('update:visible', val)
	}
})

// 监听
// watch(
// 	() => selectList_.value,
// 	val => {
// 		data.selectList = val
// 	},
// 	{
// 		immediate: true,
// 		deep: true
// 	}
// )

// 获取地址信息
let adressInfo = ref()
const getAdress = (data: any) => {
	adressInfo.value = data
}

// 打开弹窗事件
const open = () => {}

// 确定按钮事件
const submit = () => {
	emit('getAdress', adressInfo.value)
	emit('cancel')
}

// 关闭弹窗事件
const cancel = () => {
	emit('cancel')
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 500px;
}
</style>
